.sprite {
    background-image: url('../img/tb-sprite.svg');
    background-size: 96px 96px;
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}
.top-bar .sprite {
    &.vm { background-position:   0px -24px; }
    &.tw { background-position: -48px -24px; }
    &.fb { background-position: -24px -24px; }
    &.ig { background-position: -72px -24px; }
}

footer .sprite {
    &.vm { background-position:   0px 0px; }
    &.tw { background-position: -48px 0px; }
    &.fb { background-position: -24px 0px; }
    &.ig { background-position: -72px 0px  }
}

.tb-logo {
    background-size: 128px 128px;
    background-position: 0 -71px;
    -webkit-transition: none;
    &:hover {
        background-position: -64px -71px;
    }
}

@include min-screen ($vw-medium) {
    .tb-logo {
        background-size: 160px 160px;
        background-position: 0 -85px;
        -webkit-transition: none;
        &:hover {
            background-position: -80px -85px;
        }
    }
    .top-bar .sprite {
        &.vm{ background-position: 0px 0px;
            &:hover{ background-position: 0px -24px; }
        }
        &.tw{ background-position: -48px 0px;
            &:hover{ background-position: -48px -24px; }
        }
        &.fb{ background-position: -24px 0px;
            &:hover{ background-position: -24px -24px; }
        }
        &.ig{ background-position: -72px 0px;
            &:hover{ background-position: -72px -24px; }
        }
    }
}